<template>
    <div class="catalogue-container">
        <div class="top">
            <!-- 搜索 -->
            <el-form :inline="true" class="demo-form-inline" :model="catalogueValue">
                <!-- 姓名手机号搜索 -->
                <el-form-item>
                    <el-input placeholder="序号或目录名称" v-model="catalogueValue.search" />
                </el-form-item>
                <!-- 搜索 -->
                <el-form-item>
                    <el-button @click="toSerch" type="primary">
                        <el-icon style="font-weight:bolder; margin-right: 5px">
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 添加按钮 -->
            <div class="bothBtn">
                <el-button type="primary" :icon="Plus" class="sureBtn" disabled> 添加</el-button>
                <el-button type="primary" @click="goBack">返回</el-button>
            </div>
        </div>

        <!-- 课程表格数据 -->
        <el-table :data="filtercurriculumData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
            style="width: 100%" class="curriculum-data" :table-layout="tableLayout" :header-cell-style="{
                background: '#ecf7ff',
                color: '#666666',
                fontWeight: '600',
                fontSize: '16px',
            }" :cell-style="cellStyle">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="catalogueName" label="目录名称" />
            <el-table-column prop="catalogueStatu" label="开课状态" />
            <el-table-column prop="catalogueTime" label="开课时间">
                <template #default="{ row }">
                    <span>{{ dayjs.unix(row.catalogueTime).format('YYYY-MM-DD') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="catalogueOperation" label="操作">
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" circle disabled />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="pageSize"
            :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            class="pagination" />
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Search, Plus, Edit } from '@element-plus/icons-vue';
import { getCourse } from '../../../api/user';
import { useRouter } from "vue-router"
import dayjs from 'dayjs';

const currentPage = ref(1)
const pageSize = ref(6)
const curriculumData = ref([])
const filtercurriculumData = ref([])
const router = useRouter()

const totalSize = computed(() => {
    return filtercurriculumData.value.length
})

const fetchData = async () => {
    let count = 0
    const arr = await getCourse()

    arr?.forEach((item) => {
        if (item.curriculumStatu == 0) {
            count++
            curriculumData.value.push({
                "id": count,
                "catalogueName": item.curriculumName,
                "catalogueStatu": '未开课',
                "catalogueTime": item.curriculumCreateTime,
            })
        }
    })

    filtercurriculumData.value = curriculumData.value
}

const handleSizeChange = (val) => {
    pageSize.value = val
}

const handleCurrentChange = (val) => {
    currentPage.value = val
}

const goBack = () => {
    router.push("/course/index")
}

// 姓名手机号搜索 
const catalogueValue = reactive({
    search: ''
})

// 表格宽度自适应  
const tableLayout = ref('auto')

// 蓝色字体
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.label === '开课状态') {
        return {
            color: '#1485fe'
        }
    }
}

// 搜索
const toSerch = () => {
    // 筛选为空，直接赋值
    if (!catalogueValue.search) {
        filtercurriculumData.value = curriculumData.value
        return
    }

    // 过滤
    filtercurriculumData.value = curriculumData.value.filter(item => item.catalogueName.includes(catalogueValue.search) || item.id.toString().includes(catalogueValue.search))
}

onMounted(() => {
    fetchData()
})

</script>

<style lang="scss" scoped>
.demo-form-inline {
    display: flex;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px
}

.catalogue-container {
    height: 100%;
    // min-height: 600px;
    padding: 32px;
    box-sizing: border-box;
}

.el-form-item {
    margin-bottom: 0px;
}

.catalogue-data {
    width: 100%;
    height: 100%;
    border: 1px solid #eeeeee;
}

:deep(.el-table .el-table__cell) {
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>